<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" maxlength="11" v-model="form.phone" placeholder="用户名">
        <view class="more"></view>
      </view>
     <!-- <view class="info" :style="isLoginWay?'':'display: none'">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo">获取验证码</text>
          <text class="mo" style="display: none">59秒后重试</text>
        </view>
      </view> -->
      <view class="info" :style="isLoginWay?'display: none':''">
        <input :password='!isPassword' v-model="form.password" maxlength="26" placeholder="请输入密码">
       <!-- <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
          <text class="mo">忘记密码</text>
        </view> -->
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isLogin?'opacity:1':'opacity:0.4'" @click="isLogin?onLogin():''">
        <text>登录</text>
      </view>
    </view>
    <!-- 操作 -->
   <!-- <view class="operation">
      <text @click="onLoginCut">{{isLoginWay?'手机号密码登录':'短信验证码登录'}}</text>
      <text @click="onRegister">新用户注册</text>
    </view> -->
    <!-- 其他方式登录 -->
  <!--  <view class="other-ways">
      <text>其他登录方式</text>
    </view> -->
    <!-- 登录方式 -->
    <!-- <view class="login-way">
      <view class="way">
        <image src="/static/wx_ico.png" mode=""></image>
        <text>微信登录</text>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      isLoginWay: false,
      isPassword: false,
      // 表单
      form:{
        phone: '',
        code: '',
        password: '',
      },
    };
  },
  methods:{
   /* onRegister(){
      uni.navigateTo({
        url: '/pages/register/register'
      }) 
    },*/
    /**
     * 登录切换
     */
    onLoginCut(){
      this.isLoginWay = !this.isLoginWay;
      // 验证码
      if(this.isLoginWay){
        this.isLogin = this.form.code && this.form.phone ? true : false;
      }
      // 账号密码
      if(!this.isLoginWay){
        this.isLogin = this.form.password && this.form.phone ? true : false;
      }
    },
    /**
     * 登录点击
     */
    onLogin(){
		//console.log(`${this.form.phone}`);
		uni.request({
			url:`http://fast/index/car/loginApi.html?username=${this.form.phone}&password=${this.form.password}`,
			success:res=>{
				if(res.data=="error"){
					uni.showToast({
						title: '输入信息错误',
						icon: 'none', // 无图标，纯文字提示
						duration: 2000
					});
				}else{
					uni.navigateTo({
						url:`/pages/cart/cart?id=${res.data.id}`
					})
				}
				
			}
		})
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        // 验证码
        if(this.isLoginWay){
          this.isLogin = newValue.code && newValue.phone ? true : false;
        }
        // 账号密码
        if(!this.isLoginWay){
          this.isLogin = newValue.password && newValue.phone ? true : false;
        }
      },
      deep: true
    }
  }
}
</script>
 
<style scoped lang="scss">
.page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}
.logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;
  image{
    width: 160rpx;
    height: 160rpx;
  }
}

/* 填写 */
.input-info{
  padding: 0 6%;
  height: 240rpx;
  .info{
    display: flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;
    input{
      width: 70%;
      height: 100%;
      font-size: 26rpx;
      color: #222222;
    }
    .more{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
      height: 100%;
      .iconfont{
        font-size: 34rpx;
      }
      .mo{
        font-size: 26rpx;
        padding-left: 20rpx;
        margin-left: 10rpx;
        border-left: 2rpx solid #EEEEEE;
      }
    }
  }
}
/* 按钮 */
.btn-info{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    background: linear-gradient(to right,$base,$change-clor);
    border-radius: 100rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    opacity: 0.4;
  }
}
/* 操作 */
.operation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  height: 80rpx;
  text{
    font-size: 28rpx;
    color: #555555;
  }
}

/* 其他 */
.other-ways{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  margin-top: 100rpx;
  text{
    font-size: 28rpx;
    color: #999999;
  }
}
.other-ways::after{
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #EEEEEE;
}
.other-ways::before{
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #EEEEEE;
}
/* 登录方式 */
.login-way{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;
  .way{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    image{
      width: 100rpx;
      height: 100rpx;
    }
    text{
      font-size: 28rpx;
      color: #959595;
      margin-top: 20rpx;
    }
  }
}

</style>
